<template>
  <div class="loginCon">
    <div class="loginCard">
			<div class="title">
				<div class="logoImg">
					<img src="@/assets/logo.png" alt="">
				</div>
				<span>智慧水务后台管理系统</span>
			</div>
			<div class="loginMethod">
				<div :class="!iswxLogin?'accountLogin':'wxLogin'" @click="accountL">账号登录</div>
				<div class="divLine"></div>
				<div :class="iswxLogin?'accountLogin':'wxLogin'" @click="wxL">微信登录</div>
			</div>
			<div class="userInfo">
				<div class="account" v-show="!iswxLogin">
					<el-input v-model="userInfo.uAccountName" placeholder="请输入用户名/身份证号/邮箱"></el-input>
					<el-input v-model="userInfo.uPassword" show-password placeholder="请输入密码"></el-input>
					<el-input v-model="userInfo.verificationCode" placeholder="请输入验证码"></el-input>
					<div class="verifyImg" @click="getNewCode">
						<img src="yang/userlogin/checkCode" alt="">
					</div>
					<div class="remanber">
						<el-radio v-model="radio" label="1">记住账号</el-radio>
						<span>忘记密码？</span>
					</div>
				</div>
				<div class="account" v-show="iswxLogin">
					<div class="wxImgCard">
						<div class="wxImg"><img src="" alt=""></div>
						<span>使用微信扫一扫登录</span>
					</div>
				</div>
			</div>
			<div class="loginBtn" @click="login">
				登录
			</div>
		</div>
  </div>
</template>

<script>
import { login , getcheckCode} from '@/api/login/login' 
export default {
    name:'Login',
		data(){
			return{
				codeImg:'',
				iswxLogin:false,
				radio:'',
				userInfo:{
					uAccountName:'hanrui',
					uPassword:'123123',
					verificationCode:''
				}
			}
		},
		methods:{
			accountL(){
				this.iswxLogin = false
			},
			wxL(){
				this.iswxLogin = true
			},
			async login(){
				if(this.userInfo.verificationCode == ''){
					this.$message.error('请填写验证码')
				}else{
					const res = await login(this.userInfo)
					// console.log(window.sessionStorage.getItem(''))
					if(res.code == 200){
						this.$router.push('/UserList')
						window.localStorage.setItem('token',res.data)
						console.log(window.localStorage.getItem('token'))
						console.log(res.data)
					}else{
						this.$message.error(res.msg)
					}
				}
			},
			getNewCode(e){
				e.target.src = e.target.src.slice(0,49)+`?time=${Date.now()}`
			}
		},
		async mounted(){
		}
}
</script>

<style lang="less" scoped>
	.loginCon{
		display: flex;
		width: 100%;
		height: 100vh;
		background-image: url(../../assets/loginBac.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.loginCard{
			width: 714px;
			height: 806px;
			background-image: url(../../assets/loginCard.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				margin-top: 66px;
				display: flex;
				.logoImg{
					width: 70px;
					height: 70px;
					// background-color: red;
					img{
						width: 100%;
						height: 100%;
					}
				}
				span{
					margin-left: 10px;
					display: block;
					height: 70px;
					line-height: 70px;
					font-size: 40px;
					color: #00E7E7;
				}
			}
			.loginMethod{
				width: 70%;
				display: flex;
				justify-content: space-around;
				
				.accountLogin{
					cursor: pointer;
					width: 120px;
					height: 50px;
					border-bottom: 1px solid rgba(0, 231, 231, 1);
					font-size: 20px;
					line-height: 50px;
					box-sizing: border-box;
					text-align: center;
					font-weight: 500;
					color: rgba(0, 231, 231, 1);
				}
				.divLine{
					width: 1px;
					height: 29px;
					background-color: rgba(0, 231, 231, 0.30);
					margin-top: 10px;
				}
				.wxLogin{
					cursor: pointer;
					width: 120px;
					height: 50px;
					border-bottom: 1px solid rgba(0, 231, 231, 0.30);
					font-size: 20px;
					line-height: 50px;
					text-align: center;
					font-weight: 500;
					box-sizing: border-box;
					color: rgba(0, 231, 231, 0.30);
				}
			}
			.userInfo{
				box-sizing: border-box;
				width: 500px;
				padding: 20px 10px 20px 10px;
				.account{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					::v-deep .el-input{
						margin-top: 20px;
						margin-bottom: 20px;
						.el-input__inner{
							height: 47px;
							background-color:transparent;
							border: 1px solid #00E7E7;
						}
					}
					// 验证吗
					.verifyImg{
						position: absolute;
						width: 150px;
						height: 47px;
						top: 194px;
						right: 0;
						border-radius: 3px;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.remanber{
						display: flex;
						::v-deep .el-radio__inner{
							border:1px solid #00E7E7;
						}
						::v-deep .el-radio__input.is-checked .el-radio__inner{
							background-color: #00E7E7;
						}
						span{
							margin-left: 50px;
							cursor: pointer;
							color: #00E7E7;
							// vertical-align: top;
							height: 100%;
							line-height: 100%;
						}
					}
					.wxImgCard{
						margin: auto;
						width: 285px;
						height: 320px;
						background-color: white;
						text-align: center;
						border-radius: 20px;
						.wxImg{
							width: 285px;
							height: 285px;
							background-color: black;
							border-radius: 20px;
						}
						span{
							color: #999999;
							line-height: 20px;
						}
					}
				}
			}
			.loginBtn{
				cursor: pointer;
				height: 82px;
				width: 500px;
				border-radius: 186px;
				background-color: #00E7E7 ;
				font-size: 40px;
				font-weight: 500;
				color: white;
				line-height: 82px;
				text-align: center;
			}
		}
	}
</style>